<template>
	<view>
		<view class="all">
			<view class="top"></view>
			<view class="button">
				<view class="detail-name">
					<text>{{datailList.goodsName}}</text>
				</view>
				<view class="unit-price">
					<text>{{datailList.weight}}</text>
				</view>
				<view class="monthly-sales">
					<text>月售{{datailList.monthlySales}}</text>
				</view>
				<view class="nocllon">
				</view>
				<view class="symbol">
				</view>
				<view class="num">
					{{datailList.price}}
				</view>
				<view class="delicious-introduce">
					美味介绍
				</view>
				<view class="product-introduce">
					{{datailList.goodsIntro}}
				</view>
				<view class="add-pocket" @tap="isAdd" v-if="isClick">
					<text>加入口袋 1</text>
				</view>
				<view class="calculated-quantity" v-if="!isClick">
					<view class="add-quantity" @tap="add"></view>
					<view class="quantity">{{num}}</view>
					<view class="btn-quantity" @tap="sub"></view>
					<view class="wenzi">
						口袋 2
					</view>
				</view>


			</view>
			<view class="detail-img">
				<image :src="basUrl + datailList.pictureUrl" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {basUrl} from "@/common/basUrl.js"
	import {
		getDetail
	} from "@/api/home.js"
	export default {
		created() {
			this.getAllStoreList()
		},
		data() {
			return {
				basUrl:basUrl,
				isClick: true,
				num: 0,
				goodsIds:0,
				datailList:[],

			}
		},
		methods: {
			getAllStoreList() {
				let that = this
				uni.getStorage({
					key: "goodsId",
					success(res) {
						console.log('获取成功', res)
						console.log("哦哦",res.data);
						getDetail(res.data).then(res => {
							// console.log("丰富",res.rows[0]);
							that.datailList = res.rows[0]
							console.log("分发给",that.datailList);
						}).catch(err=>{
							console.log(err);
						})
					}

				})
				
			},
			// // 加号
			isAdd() {
				this.isClick = false
				this.num++;
			},
			add() {
				this.num++;
			},
			sub() {
				if (this.num !== 0) {
					this.num--;
					if (this.num == 0) {
						this.isClick = true
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		position: relative;
		width: 100%;
		height: 100%;

		.top {
			width: 750rpx;
			height: 550rpx;
			background: #FA8C16;
			// box-shadow: inset 0rpx 452rpx 294rpx -256rpx rgba(255, 255, 255, 0.25);
		}

		.button {
			position: absolute;
			width: 100%;
			// height: 100%;
			// left: calc(50% - 375px/2);
			top: 202rpx;
			background: #FFFFFF;
			border-radius: 72rpx 72rpx 0px 0px;

			.detail-name {
				width: 288rpx;
				height: 72rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 1000;
				font-size: 72rpx;
				line-height: 72rpx;
				text-align: center;
				color: #000000;
				margin-top: 252rpx;
				margin-left: 52rpx;
			}

			.unit-price {
				width: 150rpx;
				height: 56rpx;
				background: #FA8C16;
				border-radius: 24rpx;
				margin-left: 52rpx;
				margin-top: 32rpx;

				text {
					width: 94rpx;
					height: 28rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #FFFFFF;
					margin-left: 35rpx;
				}
			}

			.monthly-sales {
				width: 150rpx;
				height: 56rpx;
				background: #FA8C16;
				border-radius: 24rpx;
				margin-left: 252rpx;
				margin-top: -55rpx;

				text {
					width: 94rpx;
					height: 28rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #FFFFFF;
					margin-left: 35rpx;
				}
			}

			.nocllon {
				width: 53rpx;
				height: 48rpx;
				background-image: url("../../static/oncoll.png");
				background-size: 100%;
				margin-left: 600rpx;
				margin-top: -140rpx;
			}

			.iscllon {
				width: 53rpx;
				height: 48rpx;
				background-image: url("../../static/iscoll.png");
				background-size: 100%;
				margin-left: 600rpx;
				margin-top: -140rpx;
			}

			.symbol {
				width: 20rpx;
				height: 25rpx;
				background-image: url("@/static/Vector (8).png");
				background-size: cover;
				margin-left: 570rpx;
				margin-top: 43rpx;
			}

			.num {
				width: 80rpx;
				height: 56rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 56rpx;
				line-height: 56rpx;
				color: #FA8C16;
				margin-left: 600rpx;
				margin-top: -30rpx;
			}

			.delicious-introduce {
				width: 144rpx;
				height: 36rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 1000;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #000000;
				margin-left: 52rpx;
				margin-top: 50rpx;
			}

			.product-introduce {
				width: 606rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 150%;
				color: #BFBFBF;
				margin-left: 52rpx;
				margin-top: 50rpx;
			}

			.add-pocket {
				position: fixed;
				bottom: 50rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				width: 606rpx;
				height: 92rpx;
				background: #FA8C16;
				border-radius: 48rpx;

				// margin-top: 230rpx;
				// margin-left: 70rpx;
				text {
					width: 172rpx;
					height: 92rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 36rpx;
					line-height: 92rpx;
					color: #FFFFFF;
					// margin-top: 50rpx;
					margin-left: 210rpx;
				}
			}

			.calculated-quantity {
				position: fixed;
				bottom: 50rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				width: 606rpx;
				height: 92rpx;
				background: #FFFFFF;
				border: 1px solid #D9D9D9;
				border-radius: 48rpx;

				// margin-top: 230rpx;
				// margin-left: 70rpx;
				.add-quantity {
					width: 48rpx;
					height: 48rpx;
					background-image: url("@/static/Frame (12).png");
					margin-top: 22rpx;
					margin-left: 72rpx;
				}

				.btn-quantity {
					width: 48rpx;
					height: 48rpx;
					background-image: url("@/static/Frame (13).png");
					margin-left: 307rpx;
					margin-top: -52rpx;

				}

				.quantity {
					width: 22rpx;
					height: 36rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #FA8C16;
					margin-left: 200rpx;
					margin-top: -35rpx;
				}

				.wenzi {
					width: 106rpx;
					height: 36rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 1000;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #121B36;
					margin-left: 430rpx;
					margin-top: -35rpx;
				}
			}




		}

		.detail-img {
			position: absolute;
			width: 360rpx;
			height: 360rpx;
			left: calc(50% - 360rpx/2 + 1rpx);
			top: 50rpx;
			// background: #FFFFFF;
			box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.25), inset 0px 2px 17px rgba(0, 0, 0, 0.25);
			border-radius: 113332px;

			image {
				width: 360rpx;
				height: 360rpx;
				background-size: 100%;
			}
		}
	}
</style>
